<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  <title>App录音</title>
  <!--标准mui.css-->
  <link rel="stylesheet" href="../css/mui.min.css">
  <script src="../js/mui.min.js"></script>
  <!--App自定义的css-->
  <script src="../js/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/app.css" />
  <link rel="stylesheet" href="../npl/css/vant.mini.css" />
  <script src="../js/vue.js"></script>
  <script src="../js/vconsole.min.js"></script>
  <script src="../js/sm2.js"></script>
  <script src="../js/sm3.js"></script>
  <script src="../js/mixinSsj.js"></script>
  <!-- <script src="../js/feedback.js"></script> -->
  <script src="../js/clipboard.js"></script>
  <script src="../js/flexible.js"></script>
  <script src="../npl/js/vant.mini.js"></script>
  <script src="../js/elementui.js"></script>
  <link rel="stylesheet" href="../css/elementui.css">
  <style>
    .foot {
      position: fixed;
      bottom: 0px;
      left: 0px;
      box-sizing: border-box;
      width: 100%;
      padding: 20px;
      /* height: 1.7rem; */
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .left a {
      line-height: 0.5rem;
      color: #1E3754;
    }


    .left :nth-child(1) span {
      line-height: 0.5rem;
      color: #fff;
    }

    .top {
      height: 4.5rem;
      width: 100%;
      box-sizing: border-box;
      font-size: 0.3rem;
      /* border: 3px dashed rgb(25, 179, 182); */
      position: relative;
      border-radius: 10px;
      padding: 0.3rem;
      margin-bottom: 0.3rem;
      background-color: #fff;
    }

    .shorthand {
      width: 100%;
      box-sizing: border-box;
      position: absolute;
      z-index: 999999;
      left: 0;
      height: .96rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .hr {
      background-color: #fff;
      width: 1.5px;
      height: 0.04rem;
      float: right;
      margin-left: 6px;
      animation: liner 1s ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    .hr1,
    .hr4,
    .hr7,
    .hr10,
    .hr13,
    .hr16,
    .hr19,
    .hr22,
    .hr25 {
      animation-delay: -2s;
    }

    .hr2,
    .hr5,
    .hr8,
    .hr11,
    .hr14,
    .hr17,
    .hr20,
    .hr23,
    .hr26 {
      animation-delay: -1s;
    }

    .hr3,
    .hr6,
    .hr9,
    .hr12,
    .hr15,
    .hr18,
    .hr21,
    .hr24 {
      animation-delay: -1.5s;
    }

    @keyframes liner {
      0% {
        transform: scaleY(1);
      }

      100% {
        transform: scaleY(6);
      }
    }

    .lines {
      width: 55%;
    }

    .time {
      /* width: 15%; */
      color: #8a9dbe;
      font-size: 12px;
      margin: .1rem 0 0 .2rem;
    }

    .start {
      width: 100%;
      height: 100%;
    }

    /* WebKit browsers */

    ::-webkit-input-placeholder {
      color: #D8E6FE;
    }

    /* Mozilla Firefox 4 to 18 */

    :-moz-placeholder {
      color: #D8E6FE;
      opacity: 1;
    }

    ::-moz-placeholder {
      color: #D8E6FE;
      opacity: 1;
    }

    :-ms-input-placeholder {
      color: #D8E6FE;
    }

    .mui-toast-container {
      top: 50%
    }

    .clipboardContent {
      position: relative;
      background: none;
      height: 100%;
    }

    .char-background {
      background: #CCC;
      /* 默认背景颜色 */
      display: inline-block;
      /* 让每个字符可以设置自己的背景 */
      padding: 0 3px;
      /* 字符周围的空间 */
      margin: 0 -3px;
      /* 修正外边距，使得背景不会超出字符范围 */
    }

    .output_box {
      /* height: 100%;; */
      /* overflow: hidden; */
      overflow-y: auto;
      border-radius: 15px;
      font-size: .36rem !important;
      line-height: 28px;
      /* border: 1px solid #D8E6FE; */
      border: none;
      color: #333;
      padding: .25rem .3rem;
    }

    .clipboardContent img {
      width: 0.3rem;
    }

    .form {
      padding: 0 0rem 0.25rem;
      height: calc(100% - 1.7rem);
      /* background: #fff; */
      flex: 1;
      /* border-radius: 0 0 15px 15px; */
      /* margin: 0.2rem 0.2rem 0.2rem; */
    }

    .voice-list,
    .voice-list li {
      display: none;
    }

    .is-dialog {
      overflow: hidden;
    }

    .is-dialog .dialog {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
      /* opacity: 0.7; */
      /* z-index: 1111; */
    }

    .is-dialog .dialog {
      filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    }

    .Btn {
      display: flex;
      justify-content: space-between;
      padding: 0.2rem 0.3rem;
      background: #fff;
      align-items: center;
      flex-wrap: wrap;
      border-radius: 14px;
      box-shadow: 0px 4px 8px rgba(30, 55, 84, 0.04);
      ;

    }

    .uldis {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      align-items: center;
    }

    .btn_r {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .Btn_l {
      display: flex;
    }

    .btn_l_img {
      margin-right: .2rem;
      width: .52rem;
      height: .52rem;
    }

    .youx {
      width: 48px;
      height: 28px;
    }

    .btn_l_img img {
      width: 100%;
      height: 100%;
    }

    .aaa {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .header_title {
      /* height: .85rem; */
      display: flex;
      /* background: #fff; */
      padding: .3rem 0.1rem 0 .3rem;
      height: 1.7rem;
      /* border-radius: 15px 15px 0 0; */
    }

    .title_inp {
      width: 50%;
    }

    .title_inp input {
      border: none !important;
    }

    .van-popup--center {
      border-radius: 12px;
      width: 80%;
      padding: 20px 10px 10px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      height: 25%;
    }

    .van-cell {
      align-items: center;
      padding: 10px 2px 10px 5px;
      justify-content: space-between;
    }

    .van-cell input[type=text] {
      margin: 0;
      padding: 5px 10px
    }

    .van-field__label {
      margin: 0px;
      width: 1rem;
      font-size: 15px;

    }

    .van-button--normal {
      padding: 4px 28px;
      font-size: 14px;
    }

    .content_wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      /* border-radius: 0 0 15px 15px; */
      /* background: url("../image/text_bgd.png"); */
      background-color: #fff;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: calc(100vh - 2.7rem);
      padding: 0 16px 88px;
    }

    .updata_box {
      margin: .2rem 0 -0.2rem .3rem;
      display: flex;
      align-items: center;
    }

    .handle_btn_tips {
      color: #707394;
      font-size: 12px;
      margin-bottom: 20px;
      line-height: 0;
    }

    .handle_btn {
      height: .96rem;
      border-radius: 30px;
    }

    .isStartTalk {
      background: url(../image/shuoyishuo_btn_bg_1.png) no-repeat;
      background-size: 100% 100%;
    }

    .handle_btn_tips span {
      font-size: 30px;
      position: relative;
      top: 4px;
    }

    /* .button-clicked {
       filter: brightness(0.7);
       transition: filter 0.2s ease;
     } */
    .van-nav-bar__title {
      /* width: 100px; */
      flex:1;
      display: flex;
      justify-content: flex-start ;
      /* margin-left: 2rem; */
    }

    .van-nav-bar__right {
      /* width: 170px; */
    }
  </style>
  <!-- 上传语音的样式 -->
  <style>
    .uplode {
      /* width: 100%; */
      position: fixed;
      z-index: 2000 !important;
      right: 25px;
      bottom: 25px;
      /* padding: 0 20px; */
    }

    .uplode_img {
      width: 1.4rem;
      /* float: right; */
      height: 1.4rem;
    }

    /* #form-user{
            width: 100%;
            float: right;
            height: 100%;
        } */
    .form-user {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .uplode_img img {
      width: 100%;
      height: 100%;
    }

    .wrpper {
      /* width: 34px; */
      height: 64px;
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
    }

    .List_wrapper .List_access {
      /* width: 1.5rem; */
      height: 16px;
      margin-left: 3px;
      line-height: 16px;
      background-color: rgba(95, 132, 247, 0.08);
      border-radius: 18px;
      font-family: PingFang SC;
      color: #2d343c;
      font-size: 10px;
      padding: 0 5px;
      /* border-right: 1px solid #ccc; */
      color: rgb(199, 197, 197);
      /* left: 55%;
              top: -2% */
      float: left;
    }

    .List_wrapper .List_time {
      height: 16px;
      line-height: 16px;
      /* background-color: rgba(95, 132, 247, 0.08); */
      border-radius: 18px;
      font-family: PingFang SC;
      color: #2d343c;
      font-size: 10px;
      padding: 0 5px;
      /* position: absolute; */
      /* float: left; */
      display: flex;
      /* align-items: center; */
      /* justify-content: space-between; */
      /* border-right: 1px solid #ccc; */
      color: #5f6871;
      font-size: 13px;
      left: 0%;
      top: 0%
    }

    .List_wrapper {
      height: 16px;
      width: 215px;
      line-height: 16px;
      /* position: absolute; */
      display: flex;
      margin-bottom: .3rem;
      /* left: 0; */
      /* top: 13% */
    }

    .List_wrapper1 {
      height: 16px;
      width: 85%;
      line-height: 16px;
      position: absolute;
      left: 17%;
      top: 52%
    }

    .List_img_clock {
      width: .3rem;
      height: .3rem;
    }

    .List_img img {
      width: 100%;
      height: 100%;
    }

    .List_img {
      width: .7rem;
      height: .7rem;
      margin-right: 15px;
    }


    .van-cell {
      padding: 0 10px !important;
      background: none !important;
    }

    #multipartFile1 {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0;
      z-index: 999;
    }

    .form_btn {
      width: 100%;
      display: flex;
      padding: 0 5%;
      justify-content: space-between;
    }

    .form_btn .qx {
      width: 47%;
      background-color: rgba(45, 52, 60, 0.08);
      border-radius: 48px;
      font-family: PingFang SC;
      color: rgba(45, 52, 60, 0.8);
    }

    .form_btn .tj {
      width: 47%;
      background-color: #5f84f7;
      color: #fff;
      border-radius: 48px;
    }

    .van-popup--center {
      border-radius: 12px;
      width: 90%;
      padding: 20px 10px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      height: 50%;
    }

    .van-cell {
      align-items: center;
      padding: 10px 2px 10px 5px;
      justify-content: space-between;
    }

    .popWrapper {
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
    }

    .fileImg {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 14px .3rem 0;
    }

    .pop_title {
      font-family: PingFang SC;
      font-weight: bold;
      color: #2d343c;
      font-size: 16px;
    }

    .upload_img {
      width: 100%;
      height: 4.5rem;
    }

    .form_wrapper {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: .5rem;
    }

    .form_img {
      width: 25%;
      height: 38%;
    }

    .form_img img {
      width: 100%;
      height: 100%;
    }

    .form_text {
      font-weight: 500;
      margin-top: 4px;
      color: rgba(45, 52, 60, 0.6);
      font-size: 14px;
    }

    .flowPath {
      width: 100%;
      flex: 1;
    }

    .wrpper {
      /* width: 34px; */
      margin-top: 5px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
    }

    .wrpper_warp {
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
      padding: 0 .5rem;
      background-color: #fff;

    }

    .wrpper_warp:active {
      filter: brightness(97%);
    }

    .wrpper1 {
      /* width: 34px; */
      /* height: 64px; */
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
      padding: .4rem 0;
      border-bottom: 1px solid #f1f1f1;
    }

    .List_img img {
      width: 100%;
      height: 100%;
    }

    .List_img {
      width: .7rem;
      height: .7rem;
      /* position: absolute; */
      /* left: 0;
    top: 6% */
    }

    .List_title1 {
      width: 100%;
      height: .5rem;
      line-height: .5rem;
      position: absolute;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2d343c;
      font-size: 13px;
      left: 16%;
      top: 20%
    }

    .List_title {
      width: 100%;
      /* height: .5rem; */
      line-height: .5rem;
      /* position: absolute; */
      font-family: PingFang SC;
      font-weight: 600;
      color: #2d343c;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* left: 0%; */
      /* top: 48% */
    }

    .van-popup__close-icon--top-right {
      top: 11px;
      right: 11px;
    }

    .icon_del {
      /* position: absolute; */
      top: 20px;
      position: absolute;
      z-index: 1;
      cursor: pointer;
      right: 20px;
    }

    .omit {
      /* width: 200px; */
      /* display: flex;
            align-items: center; */
      display: flex;
      flex-direction: column;
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .omit_img {
      width: 10px;
      height: 10px;
    }

    .omit_img img {
      width: 100%;
      height: 100%;
    }

    #openFile .van-progress {
      /* position: absolute; */
    }

    #openFile .van-progress__pivot {
      background: none !important;
    }


    #circle_img {
      animation: none;
      width: 100%;
      height: 100%;
    }

    @-webkit-keyframes circle {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-moz-keyframes circle {
      0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes circle {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    [v-cloak] {
      display: none !important;

    }

    /* 解决组件黑边 */
    .van-swipe-cell__right {
      margin-right: -1px;
    }



    .van-dialog__message--has-title {
      padding-top: 16px;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.5s;
    }

    .list-enter,
    .list-leave-to

    /* .list-leave-active in <2.1.8 */
      {
      opacity: 0;
      transform: translateY(-30px);
    }

    .right_btn {
      width: 120px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #29d079;
    }

    .btn_l,
    .btn_l {
      width: 50%;
      height: 100%;
    }

    .van-button__content {
      display: flex;
      flex-direction: column;
    }

    .right_btn .van-icon__image {
      width: 1.5em;
      height: 1.5em;
    }

    .right_btn .van-button__icon {
      width: 1.5em;
      height: 1.5em;
    }

    .van_pop {
      align-items: center;
      height: 47%;
      padding: 10px !important;
    }

    .van-button--primary {
      background-color: #19A97B;
    }

    .p_btn {
      width: 48%;
      height: .8rem;
      background-color: #13C09B;
      border-radius: 30px;
      color: #fff
    }

    .van_pop_text {
      color: #000;
      font-size: 18px;
      font-weight: bold;
    }

    .checkBtn {
      width: 80%;
      height: 50%;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* border: 1px #13C09B dashed; */
    }

    .van-radio__icon--checked .van-icon {
      background-color: #13C09B;
      border-color: #13C09B
    }

    /* .van-radio:nth-child(1) {
            margin-bottom: .7rem;
        } */
    .radio_img {
      width: 65px;
      height: 65px;
      margin-bottom: .4rem;
    }

    .radio_img img {
      width: 100%;
      height: 100%;
    }

    .van-radio-group {
      display: flex;
    }

    .radio_box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .radio_box:nth-child(1) {
      margin-right: 1rem;
    }

    .tishi {
      position: absolute;
      bottom: -.42rem;
      left: .48rem;
      color: red;
      z-index: 1;
      font-size: 13px;
    }

    .file-size-small {
      font-weight: 500;
      margin-top: 4px;
      color: rgba(45, 52, 60, 0.6);
      position: absolute;
      bottom: .4rem;
      font-size: 11px;
    }

    .back_r {
      width: .42rem;
      height: .48rem;
      line-height: .38rem;
    }

    .van-popover[data-popper-placement=bottom-end] {
      position: absolute;
      width: 2.5rem;
      /* left: 290px; */
      top: 1rem !important;
      right: 10px !important;
      left: 4.8rem !important;
      margin: 0px;
    }

    .van-popover__action {
      width: 100%;
    }

    ul .van-swipe-cell {
      /* height: 100px !important; 设置为你需要的高度 */
    }

    ul .wrpper1 {
      padding: .3rem 0;
      /* height: 100px !important; 设置为你需要的高度 */
    }

    .file_pop .van-popup--center {
      height: 63% !important;
      border-radius: 12px;
      width: 80%;
      padding: 20px 10px 10px;

    }

    .search_list {
      width: 100%;
      display: flex;
    flex-direction: column;
      height: 100%;
     
    }
.List_wrappers{
  justify-content: space-around;
  flex: 1;

  overflow-y: scroll;
}
    .fileBox {
      height: 60px;
      /* width: 215px; */
      line-height: 16px;
      /* border-bottom: 1px solid #ebedf0; */
      /* position: absolute; */
      display: flex;
      /* margin-bottom: .3rem; */
      /* left: 0; */
      /* top: 13% */
    }

    .fileBox {
      
      height: 16%;
    }

    .file_title {
      width: 100%;
      height: 50px;
      font-size: 18px;
      border-bottom: 1px solid #ebedf0;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
    }

    .file_name_h {
      display: flex;
      flex: 1;
      padding: 0 10px;
      align-items: center;
      justify-content: center;

      /* height: 1rem; */
    }
    .file_name_h_img{
      width: .6rem;
      height: .5rem;
    }
    .file_name_h_img img{
      width: 100%;
      height: 100%;
    }
    .file_name_text{
      flex: 1;
      height: 100%;
      word-break: break-all; /* 关键属性，替代原来的 normal */
    overflow-wrap: break-word; /* 辅助长单词换行，增强兼容性 */
      font-size: 16px;
      display: flex;
      line-height: 20px;
      align-items: center;
      /* align-content: center; */
      border-bottom: 1px solid #ebedf0;
      margin-left: 20px;
    }
    .header_tit .van-nav-bar__left, .header_tit .van-nav-bar__right{
  position: static !important;
  text-align: left; /* 直接让文字左对齐（最直接的偏左方式） */
  margin-left: 0;

}
  </style>
</head>

<body>
  <div v-cloak id="app">
    <div class="is-loading">
      <div class="is-loading">
        <div class="curtain" id="curtain">
          <div class="loadingBgc">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择路径 -->
    <div class="file_pop">
      <van-popup class="van_pop" round closeable v-cloak :close-on-click-overlay="false" v-model="showShare">
        <div class="search_list">
          <div class="file_title">选择文件夹</div>

          <div class="List_wrappers" >
            <div class="fileBox" @click="fileListBtn(item)" v-for="item in filePathList">
            <template v-if="item.pathName == '最近打开'">
              <div class="file_name_h">
                <div class="file_name_h_img"><img src="../image/fileYellow.png" alt=""></div>

                <div class="file_name_text">{{item.pathName}}</div>
              </div>
            </template>
            <template v-else>
              <div class="file_name_h">
                <div class="file_name_h_img"><img src="../image/fileBlack.png" alt=""></div>

                <div class="file_name_text">{{item.pathName}}</div>
              </div>
            </template>
            </div>
          </div>

        </div>
      </van-popup>
    </div>
    <!-- 上传弹框 -->
    <van-popup v-cloak :close-on-click-overlay="false" v-model:show="showFile">
      <div class="icon_del" @click="delUplode">
        <van-icon name="cross" />
      </div>
      <div class="popWrapper">
        <div class="pop_title">发送语音
        </div>
        <div class="fileImg">
          <div class="upload_img" :style="{
                  backgroundImage: `url(${'../image/lu_bg2.png'})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundSize: '100% 99%' // 新增样式
                }">
            <form class="form-user">
              <div class="form_wrapper" @click="checkFile">
                <p class="form_text">点击此处上传录音文件</p>
                <p :class="fileSizeClass">上传文件大小不超过40MB，上传后直接发送到邮箱</p>
              </div>
            </form>
          </div>
          <div class="flowPath" v-if="progressBar">
            <div class="wrpper">
              <div class="List_img"><img src="../image/lu_play1.png" alt=""></div>
              <div class="List_title1">{{fileName | fileNametext}}</div>
              <div class="List_wrapper1">
                <el-progress :stroke-width="3" :percentage="progress" color='#4694fd'></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-cloak :close-on-click-overlay="false" v-model:show="showFileNw">
      <div class="icon_del" @click="delUplode">
        <van-icon name="cross" />
      </div>
      <div class="popWrapper">
        <div class="pop_title">
          语音同步至内网网站
        </div>
        <div class="fileImg">
          <div class="upload_img" :style="{backgroundImage: 'url(../image/lu_bg3.png)',backgroundRepeat: 'no-repeat',
                  backgroundSize: '100% 99%' // 新增样式
                }">
            <form class="form-user">
              <div class="form_wrapper" @click="checkFile">
                <p class="form_text">点击此处上传录音文件</p>
                <p :class="fileSizeClass">上传文件大小不超过400MB，上传后同步至内网网站</p>
              </div>
            </form>
          </div>
          <div class="flowPath" v-if="progressBar">
            <div class="wrpper">
              <div class="List_img"><img src="../image/lu_play2.png" alt=""></div>
              <div class="List_title1">{{fileName | fileNametext}}</div>
              <div class="List_wrapper1">
                <el-progress :stroke-width="3" :percentage="progress" color="#f6ab00"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!--  -->
    <div class="aaa">
      <div class="trainTicketstitle" style="padding:0px">
        <div class="header_tit">
          <van-nav-bar left-arrow>
            <template #title>
              <span>随时记</span> <!-- 这里的10px 可根据实际需求调整 -->
            </template>
            <template #left>
              <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
            </template>
            <template #right>
              <!-- <div v-show="readonly" class="Btn_l">
                </div> -->
              <div class="btn_l_img youx" @click="mailbox(0)">
                <img class='start' src="../image/shuoyishuo_youx.png" alt="">
              </div>
              <div class="btn_l_img youx" @click="mailbox(3)">
                <img class='start' src="../image/tb.png" alt="">
              </div>
              <div class="btn_l_img youx" >
                <van-popover placement="bottom-end" v-model="showPopover" trigger="click" :actions="actions"
                  @select="onSelect">
                  <template #reference>
                    <img src="../image/ssjyy.png" alt="">
                  </template>
                </van-popover>
              </div>

              <!-- <div class="btn_l_img youx" @click="joinBtn(0)">
                  <img class='start' src="../image/join1.png" alt="">
                </div>   -->
        </div>
        </template>
        </van-nav-bar>
      </div>
    </div>
    <div class="content_wrapper">
      <!-- <div  style="visibility:hidden">{{content}}
      </div> -->
      <textarea maxlength="20000" placeholder="注：文本字数上限2万字" :readonly="isStartTalk" @focus="isShowTalkBtn=false"
        @blur="isShowTalkBtn = true" style="margin-bottom: 0; font-size: 0.3rem" class="output_box" type="text"
        v-model="content" id='output_box'></textarea>
    </div>
    <div v-cloak class='foot' id="foot" v-show="isShowTalkBtn">
      <div v-if="isStartTalk" class="handle_btn_tips"><span>·</span> 松开停止转写文字</div>
      <div v-if="isStartTalk" class='shorthand'>
        <ul>
          <li class='uldis'>
            <div class="liner-box" v-if='checkClick == 1'>
              <!-- <div class="liner-box" v-show='flag==false'> -->
              <span class="lines">
                <hr class="hr hr1">
                <hr class="hr hr2">
                <hr class="hr hr3">
                <hr class="hr hr4">
                <hr class="hr hr5">
                <hr class="hr hr6">
                <hr class="hr hr7">
                <hr class="hr hr8">
                <hr class="hr hr9">
                <hr class="hr hr10">
                <hr class="hr hr11">
                <hr class="hr hr12">
                <hr class="hr hr13">
                <!-- <hr class="hr hr14">
                  <hr class="hr hr15">
                  <hr class="hr hr16">
                  <hr class="hr hr17">
                  <hr class="hr hr18">
                  <hr class="hr hr19">
                  <hr class="hr hr20"> -->
                <!-- <hr class="hr hr21">
                  <hr class="hr hr22">
                  <hr class="hr hr23"> -->
              </span>
            </div>
          </li>
        </ul>
      </div>
      <button class="handle_btn" :class="isStartTalk?'isStartTalk':''" @mousedown="handleMouseDown"
        @mouseup="handleMouseUp" @touchstart="handleMouseDown" @touchend="handleMouseUp">
        {{isStartTalk?'':'按住说话'}}
      </button>
    </div>
  </div>
  </div>
  <script src="./text.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app',
      mixins: [MixinSsj],
      data() {
        return {
          isShowTalkBtn: true, //是否显示按住说话按钮
          autoScroll: true,
          isflageIOX: true,
          checkClick: 1,
          input: '',
          content: '',
          myWebsocket: null,
          Websocket: null,
          SAMPLE_SIZE: 16,
          SAMPLE_RATE: 16 * 1000,
          FFT_SIZE: 2048,
          MODEL_CODE: '1888',
          CAPACITY_CODE: '010115',
          LANG: 'zh',
          WS_URL: '',
          TIME: new Date(),
          checkSwitch: false,
          VoiceItem: {},
          voiceTxt: {
            old: '',
            ind: null
          },
          inputDom: null,
          bufferData: [],
          readonly: true,
          VoiceItemID: this.generateUUID(),
          count: 0,
          timer: null,
          isStartTalk: false,
          originalHeight: document.documentElement.clientHeight || document.body.clientHeight,
          
        }
      },
      created() {
        $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , () => {
          let jsApiList = [];
          let this_r = this
          wx.ready(() => {
            wx.onHistoryBack(() => {
              this_r.home()
              return false
            });
          });
          jsApiList = [
            'startRecordVoiceBuffer',
            'ext_AudioRecorder_Start',
            'ext_AudioRecorder_Stop',
            'onRecordBufferReceived',
            'ext_FileBrowser_StartPreView',
            'ext_FileBrowser_AppointDirChooseFile',
            'multiWindows_subscribe',
            'stopRecord',
            "onHistoryBack"
          ];
          wx.config({
            beta: true,
            debug: false,
            appId: "ww4d11a39991ebffdc",
            timestamp: '1639582452',
            nonceStr: "AMQGnmTMzhJetshY",
            signature: 'fb9f560a9b4824f7db3525926994010de74ea055',
            jsApiList: jsApiList
          });
        });

      },
      mounted() {
        
        this.compatibleInput()
        this.inputDom = document.getElementById("output_box")
        window.addEventListener('resize', this.pageResize())
        // this.testMsg()
      },
      watch: {
        content: {
          handler(t) {
            if (t == "") {
              this.inputDom.style.background = "none"
            } else {
              this.inputDom.style.background = "#F6F7F9"
              this.inputDom.style.height = this.inputDom.scrollHeight + 'px';
            }
          },
          //  immediate: true
        },

      },
      filters: {
        textNum: (value) => {
          if (!value) return "";
          let data = value.split("");
          if (data.length < 15) {
            return value;
          }
          return value.slice(0, 15) + "...";
        },

        timeNum: (value) => {
          if (!value) return "";
          let data = value.split("");
          if (data.length < 15) {
            return value;
          }
          return value.slice(0, 15) + "...";
        },
      },
      computed: {

      },
      methods: {
        // 测试数据
        testMsg() {
          const morkData = `天通苑人有人与人如意天通苑有人与人人如意天通苑有人与人  如意天通苑人有人与人如意天通苑人`
          morkData.split('').forEach((item, index) => {
            const word = morkData.slice(0, index + 1)
            const completed = index === morkData.length - 1
            setTimeout(() => {

              this.content += word
              //       console.log(word)
              //       console.log(completed)
              // this.onMessage({
              // 	data:JSON.stringify({
              // 		word: word,
              // 		completed: completed
              // 	})
              // })
            }, (index + 1) * 1000)
          })
        },
        joinBtn() {
          if (!this.content || this.content.split(" ").join("").length == 0) {
            mui.toast('分享内容不能为空', {
              duration: 'long',
              type: 'div'
            })
            return
          }
          $("#curtain").css("display", "block");
          data = {
            sceneNo: 54,
            text: this.content,
            title: ''

          }
          var data = greneralRequest("/tjAiAssistant/shareFile/shareToBase64", JSON.stringify(data))
        },
        pageResize() {
          this.$nextTick(() => {
            var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.onresize = () => {
              var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
              if (resizeHeight < originalHeight) {
                this.isShowTalkBtn = false
              } else {
                this.isShowTalkBtn = true
              }
            }
          })
        },
        generateUUID() {
          var d = new Date().getTime();
          var d2 = (performance && performance.now && (performance.now() * 1000)) ||
          0; //Time in microseconds since page-load or 0 if unsupported
          return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16;
            if (d > 0) {
              r = (d + r) % 16 | 0;
              d = Math.floor(d / 16);
            } else {
              r = (d2 + r) % 16 | 0;
              d2 = Math.floor(d2 / 16);
            }
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
          });
        },
        handleMouseDown() {
          this.timer = setTimeout(() => {
            this.timer = null;
            this.getMeToken()
            this.isStartTalk = true
          }, 10); // 触发长按事件
        },

        handleMouseUp() {
          this.stopRecorder()
          clearTimeout(this.timer);
          this.timer = null;
          this.isStartTalk = false
        },
        createNonceStr(len) {
          var e = len ? len : 16;
          var t =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
            a = t.length,
            n = "";
          for (i = 0; i < e; i++)
            n += t.charAt(Math.floor(Math.random() * a));
          return n;
        },
        // 判断安卓还是ios
        compatibleInput() {
          //获取浏览器的userAgent,并转化为小写
          var ua = navigator.userAgent.toLowerCase();
          //判断是否是苹果手机，是则是true
          var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
          if (isIos) {
            this.isflageIOX = true
          } else {
            this.isflageIOX = false
          }
        },

        getMeToken() {
          let _that = this
          _that.voiceTxt.ind = null
          var iscp_port = ''
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          }
          userId = sessionStorage.getItem("userId");
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          let timestamp = new Date().getTime() + ""
          let data = {
            "userId": userId,
            "timestamp": timestamp,
          }
          const datas = JSON.stringify(data)
          let sign = sm3(datas);
          $.ajax({
            url: localUrlLink + iscp_port + "/tjAiAssistant/soundRecording/thirdparty",
            type: "post",
            async: false, //是否同步，false表示同步请求
            dataType: "json",
            data: datas,
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              sign: sign,
              Authentication: AuthenticationSession,
            },
            success: (res, txt, xhr) => {
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication")
                if (res.code == 200) {
                  if (Authentication) {
                    sessionStorage.setItem("Authentication", Authentication);
                    _that.WS_URL =
                      `ws://127.0.0.1:${iscp_port}/websocket/asr/i?token=${res.resultValue}&capacityCode=${_that.CAPACITY_CODE}&language=${_that.LANG}&code=${_that.MODEL_CODE}&sessionId=${_that.VoiceItemID}`
                    if (!('WebSocket' in window)) {
                      return
                    }
                    // let channelId = "net_upload_" + _that.createNonceStr(8) + new Date().getTime() + "";
                    if (_that.count < 1) {
                      wx.invoke("multiWindows_subscribe", {
                        channelId: _that.VoiceItemID
                      }, function (res) {
                        console.log(res, "订阅返回结果")
                        console.log(res.data.message, "信息")
                        if (res.data.method == "onMessage String" && res.data.channelId == _that
                          .VoiceItemID) {
                          _that.onMessage(res)
                        } else if (res.data.method == 'onReconnectFinishAndDisconn') {
                          //重连失败处理
                          _that.stopVB()
                        }
                      });
                    }
                    _that.count++
                    wx.invoke("ext_AudioRecorder_Start", {
                        data: {
                          channelId: _that.VoiceItemID,
                          socketUrl: _that.WS_URL
                        }
                      },
                      function (res) {
                        if (res.err_msg === 'ext_AudioRecorder_Start:ok') {
                          //成功处理
                          _that.checkClick = 1
                          _that.checkSwitch = true
                        }

                        if (res.err_msg === 'ext_AudioRecorder_Start:fail') {
                          //失败处理
                        }
                        if (res.err_msg === 'ext_AudioRecorder_Start:cancel') {
                          //取消处理
                        }
                        if (res.err_msg === 'ext_AudioRecorder_Start:not_support ') {}
                      })
                  }
                } else {
                  mui.toast(res.resultValue, {
                    duration: 'long',
                    type: 'div'
                  })
                }
              }
            },
            error: (e) => {
              mui.toast('请求异常,请稍后再试', {
                duration: 1000,
                type: 'div'
              })
            },
          })
        },
        onOpen(evt, way, afterOpen) {
          let _that = this
          this.checkSwitch = true
          wx.startRecordVoiceBuffer({
            maxDuration: 100000000,
            sampleRate: 16000
          });
          wx.onRecordBufferReceived(function (res) {
            if (_that.isflageIOX) {
              var a = ''
              if (_that.bufferData.length == 26) {
                _that.bufferData.forEach((item) => {
                  a += item
                  _that.bufferData = []
                })
                // _that.stopRecorder()
                _that.doSend(a);
              } else {
                _that.bufferData.push(res.buffer)
              }
            } else {

              _that.doSend(res.buffer);
            }
          })
          if (!$(this).hasClass("stop")) {
            $(this).addClass("stop");
            let i = 0;
            $(this).data("interval", window.setInterval(function () {
              $(".record-time").html((++i) + "s");
            }, 1000, i));
          }
        },
        doSend(message) {
          this.myWebsocket.readyState === 1 && this.myWebsocket.send(message);
        },
        onMessage(evt) {
          try {
            // const data = JSON.parse(evt.data);
            const data = JSON.parse(evt.data.message);
            // console.log(evt.data,"内容")
            if (data.code == 200) {
              if (this.voiceTxt.ind == null) {
                this.voiceTxt.ind = this.content.length
                // this.voiceTxt.ind = this.inputDom.selectionStart
                this.voiceTxt.old = ''
              }
              var allow = false
              if (this.inputDom.clientHeight * 4 / 3 + this.inputDom.scrollTop > this.inputDom.scrollHeight) {
                allow = true
              }
              // 这一行是赋值的
              data.word = data.word.replace(/[|]/g, '\n')
              data.word = data.word.replace(/[\n]/g, '\n\n')
              this.insertContent(data.word)
              if (allow && this.autoScroll) {
                setTimeout(() => {
                  this.inputDom.scrollTop = this.inputDom.scrollHeight
                  this.inputDom.style.height = this.inputDom.scrollHeight + 'px';
                })
              }
              if (data.completed == true) {
                this.voiceTxt.ind += data.word.length
                this.voiceTxt.old = ''
                this.inputDom.setSelectionRange(this.voiceTxt.ind, this.voiceTxt.ind)
                setTimeout(() => {
                  this.inputDom.setSelectionRange(this.voiceTxt.ind, this.voiceTxt
                    .ind)
                });

              }
            } else if (data.code == 'E000004') {
              mui.toast("当前已达到最大并发量限制,请稍后再试", {
                duration: 'long',
                type: 'div'
              })
              this.stopRecorder()
            } else {
              mui.toast(data.code + "语音服务异常", {
                duration: 'long',
                type: 'div'
              })
              this.stopRecorder()
            }
          } catch (error) {
            throw new Error('解析错误!' + error);
          }
        },
        insertContent(txt) {
          const content = this.content
          const startIndex = this.voiceTxt.ind
          const delLength = this.voiceTxt.old.length
          this.content = this.insertTxt(content, startIndex, txt, delLength)
          this.voiceTxt.old = txt
          this.$nextTick(() => {
            this.inputDom.setSelectionRange(this.voiceTxt.ind + txt.length, this.voiceTxt
              .ind + txt.length)
          })
        },
        insertTxt(content, index, txt, del) {
          let arr = content.split('')
          arr.splice(index, del, txt)
          return arr.join('')
        },
        stopRecorder(num) {
          let _this = this
          wx.invoke("ext_AudioRecorder_Stop", {
              data: {}
            },
            function (res) {
              if (res.err_msg === 'ext_AudioRecorder_Stop:ok') {
                _this.stopVB(num)
              }
              if (res.err_msg === 'ext_AudioRecorder_Stop:fail') {
                //失败处理
                console.log(res);
              }
              if (res.err_msg === 'ext_AudioRecorder_Stop:cancel') {
                //取消处理
                console.log(res);
              }
              if (res.err_msg === 'ext_AudioRecorder_Stop:not_support ') {
                _this.stopVB(num)
                wx.stopRecordVoiceBuffer({});
                // if (_this.myWebsocket) {
                _this.myWebsocket.close();
              }
            })
        },
        stopVB(num) {
          //成功处理
          this.time = clearInterval(this.time)
          // this.flag = true
          this.checkSwitch = false
          this.checkClick = 0
          $(this).removeClass("stop");
          window.clearInterval($(this).data("interval"));
          $(".record-time").html("");
        },
        home() {
          $(location).attr("href", "Home.html");
        },

        //发送邮箱 type存在时为发送摘要
        mailbox(type) {
          let toMail = sessionStorage.getItem("toMail")
          if (!toMail && type == 0) {
            mui.toast('请前往“我的”页面设置内网邮箱', {
              duration: 'long',
              type: 'div'
            })
            return
          }
          if (!this.content || this.content.split(" ").join("").length == 0) {
            mui.toast('内容不能为空', {
              duration: 'long',
              type: 'div'
            })
            return
          }
          let text = type == 3 ? "是否同步至内网网站？" : "是否发送邮箱？"
          var btnArray = ["取消", "确定"];
          var i = 0;
          mui.confirm(text,
            "消息提醒",
            btnArray,
            (e) => {
              if (i > 0) return;
              i++;
              if (e.index == 1) {
                $(".curtain").css("display", "block");
                var text1 = this.content;
                text1 = text1.replace(/,/g, "\r\n");
                let data = {
                  "messageTitle": 'AI助手-随时记',
                  //笔记标题
                  "message": text1,
                  "saveType": type,
                  "sceneNo": 54, //31:实时转写  33导入音频
                  "timestamp": new Date().getTime() + ""
                };
                this.sendMail(
                  data.messageTitle,
                  data.message,
                  data.sceneNo,
                  data.saveType,
                  data.timestamp

                )
              }
            }
          );
        },
        sendMail(messageTitle, message, sceneNo, saveType, timestamp) {
          const userId = sessionStorage.getItem("userId");
          const orgId = sessionStorage.getItem("unitId")
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = ""
          }
          let data = {
            "sceneNo": sceneNo, //31:实时转写 32:语音笔记 33导入音频
            "messageTitle": messageTitle, //笔记标题
            "message": message, //笔记标题+内容
            "saveType": saveType, //3 同步 1位发邮箱
            "orgId": orgId, //单位id
            "userId": userId, //用户id
            "timestamp": timestamp,
          };
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          data = JSON.stringify(data)
          let sign = sm3(data);
          $.ajax({
            url: localUrlLink + iscp_port +
              "/tjAiAssistant/IdentificationFile/voiceSendMail",
            type: "post",
            // async: false, //是否同步，false表示同步请求
            dataType: "json",
            data: data,
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              Authentication: AuthenticationSession,
              sign: sign
            },
            success: (res, txt, xhr) => {
              $(".curtain").css("display", "none");
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication")
                if (res.code == 200) {
                  if (Authentication) {
                    sessionStorage.setItem("Authentication", Authentication);
                    if (saveType == 3) {
                      showConfirmDialog("同步完成，请及时到内网网站aioa.sgcc.com.cn下载使用"," ")
                    } else {
                      mui.toast("已发送邮箱", {
                        duration: 1000,
                        type: 'div'
                      })
                      addOperator(3, 1, "发送邮箱", 1, 1, "发送邮箱成功");
                    }
                    this.content = ''

                  }

                } else if (res.code == 500) {
                  if (saveType == 3) {
                    syncToast('同步失败', 1500, "error", true)
                  } else {
                    mui.toast(res.resultValue, {
                      duration: "long",
                      type: "div",
                    });
                    addOperator(3, 1, "发送邮箱", 1, 0, "发送邮箱失败");
                  }
                }
              } else {
                mui.toast('完整性校验失败', {
                  duration: 'long',
                  type: 'div'
                })
                addOperator(3, 1, "发送邮箱", 1, 0, "发送邮箱失败");
              }

            },
            error: (e) => {
              $(".curtain").css("display", "none");
              mui.toast('请求异常,请稍后再试', {
                duration: 1000,
                type: 'div'
              })
              addOperator(3, 1, "发送邮箱", 1, 0, "发送邮箱失败");
            },

          });
        },
      }
    })
  </script>
</body>

</html>